/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div :class="['map-legend', onePageVis ? 'map-legend-show' : 'map-legend-hide']">
    <div
      class="item"
      v-for="(item, index) in legendData"
      v-if="item.number != 0"
      :key="index"
      @click="handlerMapLegend(item)"
      :style="{height: item.present + '%'}"
    >
      <div class="text">{{item.label}}</div>
      <div
        class="legend"
        :style="{background: unselectedStatus.indexOf(item.status) != -1 ?  'rgba(221,221,221,0.6)' : statusColor[item.status],}"
      >{{Math.round(item.present)}}%</div>
    </div>
    
  </div>
</template>
<script>
import {statusColor} from '../utils/contact.js';

export default {
  props: {
    legendData: Array,
    unselectedStatus: Array,
    handlerMapLegend: Function,
    onePageVis:Boolean
  },
  data() {
    return {
      statusColor: statusColor
    };
  },
  components: {}
};
</script>

<style lang='less' scoped>
@import '../utils/theme.less';
// 地图图例
.map-legend {
  position: fixed;
  top: 2.2vw;
  right: 2.2vw;
  display: flex;
  height: 25vh;
  flex-direction: column;
  transition: all ease-out 0.6s;
  // overflow: hidden;
  .item {
    cursor: pointer;
    position: relative;
    width: auto;
    // text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    .legend {
      height: 100%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: '#000';
      width: 40px;
      font-size: 12px;
    }
    .text {
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: #fff;
      align-items: center;
      font-weight: bold;
    }
  }
}
.map-legend-show{
  // right: 2.2vw;
  opacity: 1;
}
.map-legend-hide{
  // right: calc(~"100% + 2.2vw");
  opacity: 0;
}
</style>
